<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="webjars/layui/2.3.0/css/layui.css">
    <style type="text/css">
        .layui-table-cell {
            height: 54px;
        }



    </style>
</head>
<body>

<table id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="tianjia">tianjia</a>
</script>
<script type="text/html" id="url">

    <img  src="img/{{d.url}}" alt="">
</script>
<script src="webjars/layui/2.3.0/layui.js"></script>
<script>
    layui.use(['table','jquery'], function(){
        var table = layui.table;
        var $ = layui.jquery;
        //第一个实例
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    console.log(obj)
                    $.ajax({
                        url:'carport',
                        method:'delete',
                        data:{
                            idList:obj.data.id
                        },
                        success:function(data){
                            console.log(data)
                        }
                    })

                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.alert('编辑行：<br>'+ JSON.stringify(data))
            }else if(obj.event = 'tianjia'){
                layer.alert('添加陈宫')
            }
        });
        table.render({
            elem: '#demo'
            ,height: 312
            ,url: 'table' //数据接口
            ,page: true //开启分页
            ,cols: [
                [ //表头
                {field: 'id', title: 'id姓名', width:160, sort: true, fixed: 'left'}
                ,{field: 'isprivate', title: '是否私有', width:160}
                    ,{field: 'carnum', title: '车牌号', width:160}
                    ,{field: 'url', title: '车牌号', templet: '#url', width:160}
                    ,{toolbar: '#barDemo'}
            ]
            ]
        });

    });
</script>
</body>
</html>